<template>
  <div class="manager-container">
    <el-row :gutter="20">
      <el-col :span="20">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          class="manager-search"
        >
          <el-col :span="8">
            <el-form-item label="消息内容" prop="msgContent">
              <el-input
                v-model="queryParams.msgContent"
                placeholder="请输入消息内容"
                clearable
                :style="{ width: '100%' }"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发布日期" prop="createTime">
              <el-date-picker
                v-model="queryParams.createTime"
                type="date"
                placeholder="请选择发布日期"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" @click="handleQuery" size="default">
              <i class="iconfont icon-chaxun btn-icon">查询</i>
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button @click="resetQuery" size="default">
              <i class="iconfont icon-chongzhi btn-icon">重置</i>
            </el-button>
          </el-col>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-row :gutter="10" style="float: right">
          <el-col :span="1.5">
            <el-button @click="allreadY" type="primary" size="default"
              >全部已读</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button @click="handleDelete" size="default" :disabled="single">
              <i class="iconfont icon-shanchu btn-icon">批量删除</i>
            </el-button>
          </el-col>
        </el-row>
      </el-col>
      <!-- 搜索条件结束 -->
    </el-row>
    <!-- </div> -->
    <div class="table-list">
      <el-table
        :border="true"
        :data="tableList"
        class="menu-table"
        :show-header="true"
        :header-cell-style="{ background: '#f3f3f3' }"
        @selection-change="handleSelectionChange"
        height="550"
      >
        <el-table-column type="selection" align="center" width="80" />
        <el-table-column label="序号" type="index" align="center" width="80" />
        <el-table-column
          label="消息编号"
          prop="serialNo"
          align="center"
          :show-overflow-tooltip="true"
         >
             <template #default="scope">
                <span>{{scope.row.serialNo || '-'}}</span>
              </template>
            </el-table-column>
        <el-table-column
          label="消息内容"
          prop="msgContent"
          align="center"
          :show-overflow-tooltip="true"
        >
        <template #default="scope">
          <span v-html="scope.row.msgContent"></span>
        </template>
        </el-table-column>
        <el-table-column
          label="所属栏目"
          prop="titile"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="发送人"
          prop="senderText"
          align="center"
          :show-overflow-tooltip="true"
        >
        <template #default="scope">
          <div>
            {{scope.row.senderText || '-'}}
          </div>
        </template>
        </el-table-column>
        <el-table-column
          label="发布日期"
          prop="psendTime"
          align="center"
          :show-overflow-tooltip="true"
          sortable
        />
        <!-- <el-table-column
          label="有效期限"
          prop="pendTime"
          align="center"
          :show-overflow-tooltip="true"
          sortable
        /> -->
        <el-table-column
          label="状态"
          prop="readFlag"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <span v-if="scope.row.readFlag == 0">未读</span>
            <span v-if="scope.row.readFlag == 1">已读</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button
              plain
              size="default"
              type="text"
              @click="handleDetails(scope.row)"
              >查看</el-button
            >
            <el-divider direction="vertical"></el-divider>
            <el-button
              plain
              size="default"
              type="text"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="pagination"
      />
    </div>
    <formModal
      ref="formModal"
      @getList="getList"
      :formList="formList"
      :isType="isType"
    />
  </div>
</template>
<script>

import api from "@/api";
	//应用vuex
	import {
		mapState,
		mapActions,
		mapGetters
	} from "vuex";
//分页
import Pagination from "@/components/Pagination/index.vue";
import formModal from "./form.vue";
import { treeselect } from "@/api/system/dept";
import TreeSelect from "@/components/TreeSelect/index.vue"; //下拉树
export default {
  components: {
    Pagination,
    formModal,
    TreeSelect,
  },
  data() {
    return {
      // 部门树选项
      deptOptions: undefined,
      single: true, //批量删除
      ids: [],
      formList: {},
      isType: "",
      total: 0, //多少条
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      //列表数据
      tableList: [],
      zbsj: [],
    };
  },
  created() {
    this.getList();
  },
  computed: {
    ...mapGetters([
      'info',
    ]),
  },
  mounted() {},
  methods: {
    /**
     * 复选方法
     */
    handleSelectionChange(selection) {
      this.single = !selection.length;
      this.ids = selection.map((item) => item.id);
    },
    /**
     * 获取分页参数
     */
    pagination({ page, limit }) {
      this.queryParams.pageNum = page;
      this.queryParams.pageSize = limit;
      this.getList();
    },
    /**获取列表数据 */
    getList() {
      api.sysAnnouncementSend
        .list({ ...this.queryParams})
        .then((res) => {
          if (res.code) {
            //设置列表数据
            this.tableList = res.rows;
            //设置总条目数
            this.total = res.total;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    /**
     * 查询方法
     */
    handleQuery() {
      //设置默认进入第一页
      this.queryParams.pageNum = 1;
      //获取列表数据
      this.getList();
    },
    /**
     * 重置表单
     */
    resetQuery() {
      this.zbsj = [];
      this.$refs.queryForm.resetFields();
      this.getList();
    },
    /**删除 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$messageBox.confirm("是否确认删除当前数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return api.sysAnnouncementSend.del(ids)
        })
         .then(()=>{
          this.getList();
          //弹出提示
          this.$message.success("删除成功");
         })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    /**全部已读 */
    allreadY(row) {
      const ids = row.id || this.ids;
      this.$messageBox.confirm("是否确认全部设为已读？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return api.sysAnnouncementSend.readAll()
        })
          .then(()=>{
            this.getList();
            //弹出提示
            this.$message.success("设置成功");
          })
        .catch(() => {
          // this.$message.info("已取消");
        });
    },
    handleDetails(row) {
      this.isType = "details";
      this.$refs.formModal.open = true;
      this.$refs.formModal.title = "查看消息";
      api.sysAnnouncementSend.editId(row.id).then((res) => {
        if (res.code == 200) {
          this.formList = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.el-icon {
  margin-left: -5px;
}
:deep(.create-pro) {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  z-index: 9;
}
</style>
